<script setup lang="ts">
interface IProps {
  products: IProductInformation[];
  callerDevicePartInfo: IObtainCallerDevicePartInfoRes;
  calculateOrderPriceInfo: ICalculateOrderPriceRes;
}

interface IState {
  isWxPay: boolean;
  offlineBalancePay: boolean;
  monthPay: boolean;
  payType: number;
}

type EmitEvents = {
  (event: 'change', payload: number): void;
};

const props = defineProps<IProps>();
const state = reactive<IState>({ isWxPay: false, offlineBalancePay: props.callerDevicePartInfo.offlineBalancePay, monthPay: props.callerDevicePartInfo.monthPay, payType: 0 });
const emits = defineEmits<EmitEvents>();

onMounted(() => {
  if (props.products.some((item) => item.goodsType === 3)) state.isWxPay = true;
  // 如果可以线下月季或者线下余额支付
  if (props.callerDevicePartInfo.monthPay || props.callerDevicePartInfo.offlineBalancePay) {
    const businessesBalance = props.callerDevicePartInfo['map'];
    const suffBal = props.calculateOrderPriceInfo.list.some((item) => {
      return Object.keys(businessesBalance).some((key) => key.toString() === item.businessId.toString() && item.payAmount > businessesBalance[key]);
    });
    state.monthPay = suffBal;
    state.offlineBalancePay = !suffBal;
    state.payType = suffBal ? 6 : 7;
  } else {
    // state.payType = props.callerDevicePartInfo.mainFlag && props.callerDevicePartInfo.balance > props.calculateOrderPriceInfo.payableTotalAmount && !state.isWxPay ? 1 : 2;
    state.payType = 2;
  }
});

watch(
  () => state.payType,
  (payType) => emits('change', payType),
);
</script>

<template>
  <!-- 公共呼叫器，非主用户无法使用余额支付，仅支持微信支付，主用户可使用余额支付/微信支付/他人代付/货到付款 -->
  <!-- 专属呼叫器，非主用户无法使用余额支付，仅支持微信支付/货到付款，主用户可使用余额支付/微信支付/货到付款 -->
  <!-- 只有非自由呼叫器才有余额 -->
  <!-- 如果产品中含有计时产品只能微信支付 -->
  <view class="bg-white c-br c-pd mt-12px">
    <view class="fw-bold mb-12px">支付方式</view>
    <van-radio-group :value="state.payType" @change="state.payType = $event.detail">
      <van-cell-group>
        <van-cell v-if="!state.isWxPay && props.callerDevicePartInfo.mainFlag" title="余额支付" clickable @click="state.payType = 1">
          <view class="flex justify-end">
            <van-radio slot="right-icon" :name="1" />
          </view>
        </van-cell>
        <van-cell title="微信支付" clickable @click="state.payType = 2">
          <view class="flex justify-end">
            <van-radio slot="right-icon" :name="2" />
          </view>
        </van-cell>
        <template v-if="!state.isWxPay">
          <van-cell v-if="props.callerDevicePartInfo.mainFlag || props.callerDevicePartInfo.beeperType === 2" title="货到付款" clickable @click="state.payType = 3">
            <view class="flex justify-end">
              <van-radio slot="right-icon" :name="3" />
            </view>
          </van-cell>
          <van-cell v-if="props.callerDevicePartInfo.beeperType === 1" title="他人代付" clickable @click="state.payType = 4">
            <view class="flex justify-end">
              <van-radio slot="right-icon" :name="4" />
            </view>
          </van-cell>
          <van-cell v-if="state.monthPay" title="线下月结" clickable @click="state.payType = 6">
            <view class="flex justify-end">
              <van-radio slot="right-icon" :name="6" />
            </view>
          </van-cell>
          <van-cell v-if="state.offlineBalancePay" title="线下余额" clickable @click="state.payType = 7">
            <view class="flex justify-end">
              <van-radio slot="right-icon" :name="7" />
            </view>
          </van-cell>
        </template>
      </van-cell-group>
    </van-radio-group>
  </view>
</template>
